<template>
	<div class="cafeStore">
		<div class="cafeStoreHeader border-bottom">
			<div class="cafeStoreHeaderTitle">
				<p>4S门店</p>
			</div>
			<!-- <div class="cafeStoreHeaderImg" @click="goStoreMap">
				<img src="../../assets/image/cafe/location.png" alt="" />
			</div> -->
		</div>
		<div class="tabs ">
			<div class="tabItem" @click='changeArea'>
				<label :class="{red1:isRed1}">{{area}}</label>
				<span :class='{on:active1}'></span>
			</div>
			<div class="tabItem" @click='changeBrand'>
				<label :class="{red2:isRed2}">{{brand}}</label>
				<span :class='{on:active2}'></span>
			</div>
			<div class="tabItem removeBorder" @click='changeSort'>
				<label :class="{red3:isRed3}">{{sort}}</label>
				<span :class='{on:active3}'></span>
			</div>
		</div>
		<div class="topbar">
			<div class="barLeft" @click="goStoreMap">
				<img src="../../assets/image/cafe/main1.png" alt="">
				<p>地图找店</p>

			</div>
			<img src="../../assets/image/cafe/line.png" class="line">
			<div  class="barRight" @click="goPaint">
				<img src="../../assets/image/cafe/main2.png" alt="">
				<p>钣喷优选店</p>

			</div>
		</div>
		<div class="cafeStoreConditions" style="height:5.4rem;overflow:auto;" :class="{showCondi:showCondi,noShowCondi:noShowCondi}">
			<ul v-show="showArea" v-for="items in areaData">
				<li :class="{selectedRed:items.flag == 1}" @click="selectedArea(items.ID)">{{items.NAME}}</li>
				<!--<div class="cafeCondBlank"></div>-->
			</ul>
			<ul v-show="showBrand" v-for="items in brandData">
				<li :class="{selectedRed:items.flag == 1}" @click="selectedBrand(items.S_ID)">{{items.S_VAL}}</li>
				<!--<div class="cafeCondBlank"></div>-->
			</ul>
			<ul v-show="showSort" v-for="items in sortData" @click="selectedSort(items.ID)">
				<li :class="{selectedRed:items.flag == 1}">{{items.NAME}}</li>
				<!--<div class="cafeCondBlank"></div>-->
			</ul>
		</div>
		<div class="cafeStoreBlank"></div>
		<!--perfect上拉加载start-->
		<!--<scroller class='myScroller' :on-infinite="infinite" ref="myScroller" noDataText="暂无更多数据">-->
			<!--<div>-->
				<div class="cafeStoreInfo" v-if="noData" v-for="item in allData" @click="goStoreDetail(item.COMP_ID,item.COORDINATE)">
					<div class="cafeStoreImg">
						<img :src="item.SHOP_PHOTO" alt="" />
					</div>
					<div class="cafeStoreText">
						<div class="cafeStoreName">
							<p>{{item.SHOP_NAME}}</p>
						</div>

						<div class="cafeStoreBrand">
              <!-- onerror的作用是：当图片不显示时，不显示边框(手机上才看得到) -->
							<img id="imgss" :src="item.SHOP_LOGO" alt="" style="width:0.4rem;" onerror="this.style.display='none'">
						</div>
						<div class="cafeStoreAddress">
							<p>{{item.SHOP_ADDRESS}}</p>
						</div>
					</div>
					<div class="cafeStoreDistance" @click.stop="goTo4s(item.COORDINATE)">

    					<!-- <a @click.stop="" :href="'http://api.map.baidu.com/geocoder?address='+item.SHOP_ADDRESS+'&output=html&src=cwt'"> -->
						<img src="../../assets/image/cafe/go4s.png" >
						<!-- </a> -->
						<p>{{item.DISTANCE/1000|keepTwoDot}}km</p>
					</div>
					<div class="cafeStoreLine"></div>
				</div>
			<!--</div>-->
		<!--</scroller>-->
		<!--上拉加载end-->
				<div v-if="!noData" class="StoreNoData">
					<p>暂无数据</p>
				</div>
	</div>
</template>
<script>
	/*4S门店*/
	import { XHeader,Popup } from 'vux';
	import { setCookie, getCookie } from '../../util/commonUtils';
	import Vue from 'vue'
	// import wx from 'weixin-js-sdk'//微信jssdk
	import VueScroller from 'vue-scroller'
	Vue.use(VueScroller)
	export default {
		name: "store",
		// 数据
		data() {

			return {
				userId: '',
				city:'',//城市
				cid:'',//城市id
				latlgt:'',//经纬度
				area: '区域', //区域
				brand: '主营品牌', //品牌
				sort: '排序', //排序
				showArea:false,//显示区域条件
				showBrand:false,//显示品牌条件
				showSort:false,//显示排序条件
				active1: false, //控制排序的三个箭头变化
				active2: false,
				active3: false,
				isRed1:false,//控制字体是否红色
				isRed2:false,
				isRed3:false,
				isSelectedRed:true,//选中条件的红色字体
				areaData:'',//区域列表数据（搜索条件）
				brandData:'',//品牌列表数据（搜索条件）
				sortData:'',//排序列表数据（搜索条件）
				photoUrl:'',//商家相册图片的主URL
				allData:'',//4S门店列表
				selectedAreaName:'全部',//选中的区域名称
				selectedBrandName:'全部',//选中的品牌名称
				selectedSortName:'全部',//选中的排序名称
				COORDINATE:null,//门店的经纬度
				noData:true,//是否有数据
				showCondi:false,//是否显示条件
				noShowCondi:true,//不显示条件
			}
		},
		// 计算属性
		computed: {

		},
		// 创建（实例创建完成）
		created() {
			this.userId = getCookie('loginkey');
			this.city = sessionStorage.getItem('city');//城市
			this.latlgt = sessionStorage.getItem('latlgt');//经纬度
			this.cid = sessionStorage.getItem('ID');//对应的城市id
			this.$vux.loading.show({
		       text: ''
		    });
			//获取区域列表
		    this.$fetchGet('/CommonServiceWeb/getRegion',{CITY_ID:this.cid}).then(res=>{
		            if(res.STATUS_CODE == 1){
		            	let arr = res.RESULT_DATA;
		            	for(let i=0;i<arr.length;i++){
		            		arr[i].flag = 0;
		            	}
		            	arr.unshift({ID:'0',ILLEGAL:'',INITIAL:'',IS_HOT:'',MAINTAIN:'',NAME:'全部',ORDER_NUM:'',SPRAY:'',WASH:'',flag:1});
		            	this.areaData  = arr;
		            	//alert(this.areaData);
		            	//console.dir(this.areaData);
		            }
		    },err=>console.log(err));
		    //获取系统参数列表即品牌列表
		    this.$fetchGet('/SysCommonWeb/getSysParamListByGroupId',{GROUP_ID:'MAINBRAND'}).then(res=>{
		    	//console.log(res);
		            if(res.STATUS_CODE == 1){
		            	let arr = res.RESULT_DATA;
		            	for(let i=0;i<arr.length;i++){
		            		arr[i].flag = 0;
		            	}
		            	arr.unshift({S_KEY:"MAINBRAND",S_RMK:"商店主营品牌",S_ID:0,S_VAL:'全部',flag:1});
		            	this.brandData  = arr;
		            }
		    },err=>console.log(err));
		    //获取品牌列表

		    //获取排序列表，后台无接口，暂时写死
			this.sortData = [{ID:0,NAME:'全部',flag:1},{ID:1,NAME:'距离最近',flag:0},{ID:2,NAME:'好评率最高',flag:0}];

			//获取4S店列表(3.9版本)
			    let obj = {};
			    let that = this;
			    obj.REGION = that.selectedAreaName == '全部' ? '':that.selectedAreaName;
			    obj.COORDINATE = this.latlgt;
			    obj.CITY = this.city;
			    obj.MAINBRAND = that.selectedBrandName == '全部' ? '':that.selectedBrandName;
			    if(that.selectedSortName == '全部'){
			    	obj.SORTING = 0;
			    } else if (that.selectedSortName == '距离最近'){
			    	obj.SORTING = 2;
			    } else if (that.selectedSortName == '好评率最高') {
			    	obj.SORTING = 1;
			    } else {
			    	obj.SORTING = 0;
			    }
			    this.$fetchPost('/ServShopWeb/get4SShop',obj).then(res=>{
			            if(res.STATUS_CODE == 1){
			            	this.allData = res.RESULT_DATA;
			            	this.$vux.loading.hide();
			            }
			    },err=>console.log(err));

		},
		// el被创建，并挂载到实例上
		mounted() {

		},
		// 方法（实例中的方法）-----------
		methods: {
			//选择区域
			goTo4s(addr){
				var str = addr.split(",")
				window.location.href="http://api.map.baidu.com/geocoder?location="+str[1]+","+str[0]+"&coord_type=bd09ll&output=html&src=cwt"
				 // window.location.href="http://api.map.baidu.com/marker?location="+str[1]+","+str[0]+"&title=目的地&content=目的地&coord_type=bd09ll&output=html&src=cwt"

			},
			goPaint(){

				 this.$router.push("/paint")
			},
			changeArea() {
				if(this.active2) {
					this.active2 = false;
				}
				if(this.active3) {
					this.active3 = false;
				}

				this.isRed1 = !this.isRed1;
				this.isRed2 = false;
				this.isRed3 = false;
				this.showBrand = false;
				this.showSort = false;
				if(this.isRed1){
					this.showCondi = true;
					this.noShowCondi = false;
					this.showArea = true;
					this.active1 = true;
				}else{
					this.showCondi = false;
					this.noShowCondi = true;
					this.showArea = false;
					this.active1 = false;
				}
			},
			//选择品牌
			changeBrand() {
				if(this.active1) {
					this.active1 = false;
				}
				if(this.active3) {
					this.active3 = false;
				}
				this.isRed2 = !this.isRed2;
				this.isRed1 = false;
				this.isRed3 = false;
				this.showArea = false;
				this.showSort = false;
				if(this.isRed2){
					this.showCondi = true;
					this.noShowCondi = false;
					this.showBrand = true;
					this.active2 = true;
				}else{
					this.showCondi = false;
					this.noShowCondi = true;
					this.showBrand = false;
					this.active2 = false;
				}
			},
			//排序
			changeSort() {
				if(this.active2) {
					this.active2 = false;
				}
				if(this.active1) {
					this.active1 = false;
				}
				this.isRed3 = !this.isRed3;
				this.isRed1 = false;
				this.isRed2 = false;
				this.showArea = false;
				this.showBrand = false;
				if(this.isRed3){
					this.showCondi = true;
					this.noShowCondi = false;
					this.showSort = true;
					this.active3 = true;
				}else{
					this.showCondi = false;
					this.noShowCondi = true;
					this.showSort = false;
					this.active3 = false;
				}
			},
			//选中某个区域
			selectedArea(id){
				this.showCondi = false;
				this.noShowCondi = true;
				let arr = this.areaData;
				let that = this;
				for(let i=0;i<arr.length;i++){
					arr[i].flag = 0;
					if(arr[i].ID == id){
						arr[i].flag = 1;
						that.selectedAreaName = arr[i].NAME;
						this.showArea = false;
						this.isRed1 = false;
						this.active1 = false;
						this.area = arr[i].NAME;
						this.allData = '';
					}
				}
				//获取4S店列表(3.9版本)
				let obj = {};
			    obj.REGION = that.selectedAreaName == '全部' ? '':that.selectedAreaName;
			    obj.COORDINATE = this.latlgt;
			    obj.CITY = this.city;
			    obj.MAINBRAND = that.selectedBrandName == '全部' ? '':that.selectedBrandName;
			    if(that.selectedSortName == '全部'){
			    	obj.SORTING = 0;
			    } else if (that.selectedSortName == '距离最近'){
			    	obj.SORTING = 2;
			    } else if (that.selectedSortName == '好评率最高') {
			    	obj.SORTING = 1;
			    } else {
			    	obj.SORTING = 0;
			    }
			    this.$vux.loading.show({
			       text: ''
			    });
			    this.$fetchPost('/ServShopWeb/get4SShop',obj).then(res=>{
			    	//console.log(res);
			            if(res.STATUS_CODE == 1){
			            	this.$vux.loading.hide();
			            	if(res.RESULT_DATA.length == 0){
			            		//this.$refs.myScroller.finishInfinite(2);
			            		this.noData = false;
			            		return;
			            	}
			            	this.noData = true;
			            	this.allData = res.RESULT_DATA;
			            }
			    },err=>console.log(err));
			},
			//选中某个品牌
			selectedBrand(id){
				this.showCondi = false;
				this.noShowCondi = true;
				let arr = this.brandData;
				let that = this;
				for(let i=0;i<arr.length;i++){
					arr[i].flag = 0;
					if(arr[i].S_ID == id){
						arr[i].flag = 1;
						that.selectedBrandName = arr[i].S_VAL;
						this.showBrand = false;
						this.isRed2 = false;
						this.active2 = false;
						this.brand = arr[i].S_VAL;
						this.allData = '';
					}
				}
				//获取4S店列表(3.9版本)
				let obj = {};
			    obj.REGION = that.selectedAreaName == '全部' ? '':that.selectedAreaName;
			    obj.COORDINATE = this.latlgt;
			    obj.CITY = this.city;
			    obj.MAINBRAND = that.selectedBrandName == '全部' ? '':that.selectedBrandName;
			    if(that.selectedSortName == '全部'){
			    	obj.SORTING = 0;
			    } else if (that.selectedSortName == '距离最近'){
			    	obj.SORTING = 2;
			    } else if (that.selectedSortName == '好评率最高') {
			    	obj.SORTING = 1;
			    } else {
			    	obj.SORTING = 0;
			    }
			    this.$vux.loading.show({
			       text: ''
			    });
			    this.$fetchPost('/ServShopWeb/get4SShop',obj).then(res=>{
			    	//console.log(res);
			            if(res.STATUS_CODE == 1){
			            	this.$vux.loading.hide();
			            	if(res.RESULT_DATA.length == 0){
			            		//this.$refs.myScroller.finishInfinite(2);
			            		this.noData = false;
			            		return;
			            	}
			            	this.noData = true;
			            	this.allData = res.RESULT_DATA;
			            }
			    },err=>console.log(err));
			},
			//选中某个排序
			selectedSort(id){
				this.showCondi = false;
				this.noShowCondi = true;
				let arr = this.sortData;
				let that = this;
				for(let i=0;i<arr.length;i++){
					arr[i].flag = 0;
					if(arr[i].ID == id){
						arr[i].flag = 1;
						that.selectedSortName = arr[i].NAME;
						this.showSort = false;
						this.isRed3 = false;
						this.active3 = false;
						this.sort = arr[i].NAME;
						this.allData = '';
					}
				}
				//获取4S店列表(3.9版本)
				let obj = {};
			    obj.REGION = that.selectedAreaName == '全部' ? '':that.selectedAreaName;
			    obj.COORDINATE = this.latlgt;
			    obj.CITY = this.city;
			    obj.MAINBRAND = that.selectedBrandName == '全部' ? '':that.selectedBrandName;
			    if(that.selectedSortName == '全部'){
			    	obj.SORTING = 0;
			    } else if (that.selectedSortName == '距离最近'){
			    	obj.SORTING = 2;
			    } else if (that.selectedSortName == '好评率最高') {
			    	obj.SORTING = 1;
			    } else {
			    	obj.SORTING = 0;
			    }
			    this.$vux.loading.show({
			       text: ''
			    });
			    this.$fetchPost('/ServShopWeb/get4SShop',obj).then(res=>{
			            if(res.STATUS_CODE == 1){
			            	this.$vux.loading.hide();
			            	if(res.RESULT_DATA.length == 0){
			            		//this.$refs.myScroller.finishInfinite(2);
			            		this.noData = false;
			            		return;
			            	}
			            	this.noData = true;
			            	this.allData = res.RESULT_DATA;
			            }
			    },err=>console.log(err));
			},
			//导航
			goStoreMap(){
				this.$router.push('/storeMap');
			},
			//门店详情
			goStoreDetail(id,COORDINATE){
				this.$router.push('/storeDetail/'+id+'?coordinate='+COORDINATE);
			},
			//加载
			infinite(){
				//获取4S店列表(3.9版本)
			    let obj = {};
			    let that = this;
			    obj.REGION = that.selectedAreaName == '全部' ? '':that.selectedAreaName;
			    obj.COORDINATE = this.latlgt;
			    obj.CITY = this.city;
			    obj.MAINBRAND = that.selectedBrandName == '全部' ? '':that.selectedBrandName;
			    if(that.selectedSortName == '全部'){
			    	obj.SORTING = 0;
			    } else if (that.selectedSortName == '距离最近'){
			    	obj.SORTING = 2;
			    } else if (that.selectedSortName == '好评率最高') {
			    	obj.SORTING = 1;
			    } else {
			    	obj.SORTING = 0;
			    }
			    this.$fetchPost('/ServShopWeb/get4SShop',obj).then(res=>{
			    	//console.dir(res);
			            if(res.STATUS_CODE == 1){
			            	if(res.RESULT_DATA.length == 0){
	                			this.$refs.myScroller.finishInfinite(2);//通知scroller数据全部加载完成，显示的文字为noDataText的内容
	                			return;
	                	}
			            	this.allData = res.RESULT_DATA;
			            	this.$refs.myScroller.finishInfinite(2);//通知scroller数据全部加载完成，显示的文字为noDataText的内容
			            }
			    },err=>console.log(err));
			},
		},
		// 子组件
		components: {
			XHeader,
			Popup
		}
	}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
//1px的边框引入
@import url('../../assets/css/public.less');
	.cafeStore {
		min-height:100%;
		background: #fff;
		padding-bottom: 0.88rem;
		a img{
			width:0.38rem;
			height:0.38rem;
		}
		.myScroller{
			top:1.64rem;//这个高度自己测试,不好预测
			overflow:;
		}
		.cafeStoreHeader{
			width:100%;
			height:0.8rem;
			display:flex;
			background:#fff;
			position:fixed;
			top:0;
			z-index:99;
			.cafeStoreHeaderTitle{
				width:100%;
				display:flex;
				justify-content:center;
				p{
					align-self:center;
					font-size:0.36rem;
					color:#000;
				}
			}
			.cafeStoreHeaderImg{
				height:100%;
				display:flex;
				justify-content:center;
				position:absolute;
				right:0.3rem;
				bottom:0;
				img{
					align-self:center;
					width:0.38rem;
					height:0.38rem;
				}
			}
		}
		.tabs {
			width:100%;
			display:flex;
			height:0.8rem;
			background: #ffffff;
			padding: 0.15rem 0;
			.borderBFu(#CCCCCC);
			position:fixed;
			top:2.8rem;
			z-index:99;
			//.borderBFu(#d8d8d8);
			>div {
				width: 33.3%!important;
			}
			.tabItem {
				display: flex;
				justify-content: center;
				align-items: center;
				/* border-right:0.01rem solid #CCCCCC; */
				.borderRFu(#d8d8d8);
				label {
					font-size: 0.25rem;
					line-height: 0.5rem;
					color:#50505a;
				}
				ul{
					display:flex;
					li{
						list-style:none;
						font-size:0.22rem;
					}
				}
				.red1{
					color:#ec2121;
				}
				.red2{
					color:#ec2121;
				}
				.red3{
					color:#ec2121;
				}
				span {
					width: 0.18rem;
					height: 0.11rem;
					margin-left: 0.1rem;
					background: url('../../assets/image/cafe/storeDown.png') no-repeat;
					background-size: 0.18rem 0.11rem;
				}

				.on {
					background: url('../../assets/image/cafe/storeUp.png') no-repeat;
					background-size: 0.18rem 0.11rem;
				}
				select {
					appearance: none;
					border: 0;
					opacity: 0;
					width: 100%;
					height: 100%;
					-moz-appearance: none;
					-webkit-appearance: non;
					option {
						padding: 0.1rem;
					}
				}
			}
			.tabItem:last-child{
				.borderRFu(#fff);
			}
			.removeBorder{
				border-right:0;
			}
		}

		.topbar{
			position: fixed;
			width: 100%;
			height: 2rem;
			background: #ffffff;
			top: 0.8rem;
			left: 0;
			font-size: 0.23rem;
			color: #333333;
			z-index:99;
			border-bottom: 0.2rem solid #f5f5f5;
			.barLeft{
				width: 50%;
				float: left;
				img{
					width: 0.98rem;
					margin-top: 0.2rem;
					margin-bottom: 0.08rem;
				}

			}
			.line{
				position: absolute;
				left: 50%;
				top: 0.36rem;
				height: 1.08rem;
				width: 1px;

			}
			.barRight{
				width: 50%;
				float: left;
				img{
					width: 0.98rem;
					margin-top: 0.2rem;
					margin-bottom: 0.08rem;

				}

			}
		}
		.cafeStoreConditions{
			width:100%;
			position:fixed;
			top:3.6rem;
			z-index:9999;
			max-height: 7rem;
			box-shadow: 0 6px 5px rgba(0,0,0,.06);
			ul{
				.selectedRed{
					color:#ec2121;
					background:#fff url('../../assets/image/cafe/select.png') no-repeat bottom 0.29rem right 0.3rem;
					background-size:0.33rem 0.22rem;
				}
				li{
					width:100%;
					height:0.84rem;
					background:#fff;
					z-index:999;
					list-style:none;
					font-size:0.26rem;
					//border-bottom:1px solid #d8d8d8;
					line-height:0.84rem;
					text-align:left;
					text-indent:0.88rem;
					position:relative;
					.borderBFu(#d8d8d8);
				}
			}
			.cafeCondBlank{
				width:100%;
				height:0.01rem;
				background:#d8d8d8;
			}
		}
		.showCondi{
			display:block;
		}
		.noShowCondi{
			display:none;
		}
		.cafeStoreBlank{
			height:3.6rem;
			background:#fff;
		}
		.cafeStoreInfo{
			width:100%;
			display:flex;
			height:2.1rem;
			position:relative;
			.borderBFu(#d8d8d8);
			.cafeStoreImg{
				width:32.6%;
				display:flex;
				justify-content:center;
				img{
					align-self:center;
					width:2rem;
					height:1.5rem;
				}
			}
			.cafeStoreText{
				width:51%;
				height:1.5rem;
				margin-top:0.3rem;
				.cafeStoreName{
					height:30%;
					overflow: hidden;
   					text-overflow: ellipsis;


					p{
						align-self:center;
						font-size:0.3rem;
						color:#1a1a1a;
						text-align:left;
					}
				}
				.cafeStoreAddress{
					height:45%;
					display:flex;
					p{
						align-self:center;
						font-size:0.24rem;
						color:#9b9b9b;
						text-align:left;
						/*让文字只显示2行，其余用...代替start*/
                        overflow : hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        /*让文字只显示2行，其余用...代替end*/
					}
				}
				.cafeStoreBrand{
					height:32%;
					display:flex;
					p{
						align-self:center;
						font-size:0.22rem;
						color:#ec2121;
						font-weight:lighter;
						text-align:left;
					}
				}
			}
			.cafeStoreDistance{
				position: relative;
				width:17.4%;
				height:100%;
				display:flex;
				justify-content:center;
				img{
					position: absolute;
					bottom: 0.7rem;
					height: 0.42rem;
					width: 0.42rem;
					right: 0.31rem;
				}
				p{

					position: absolute;
					bottom: 0.32rem;
					font-size:0.22rem;
					color:#999;
				}
			}
			.cafeStoreLine{
				/*width:93%;
				height:1px;
				background:#d8d8d8;
				position:absolute;
				bottom:0;
				left:0.2rem;*/
				//.borderBFu(#d8d8d8);
			}
		}
		.StoreNoData{
			p{
				margin-top:0.2rem;
				font-size:0.32rem;
				color:#aaa;
			}
		}
	}
</style>
